import React from 'react';
import Input from '../Input';
import { Input as AntdInput } from 'antd';
import Select from '../Select';
/* eslint-disable*/
import './index.less';
const { TextArea } = AntdInput;

export default (props: any) => {
  const {
    title,
    errorMsg = '',
    isError = false,
    value,
    onChange,
    type,
    options,
    marginRight = false,
    wrapperStyle,
    width,
    style = {},
    ...otherProps
  } = props;
  let ReactDom;

  switch (type) {
    case 'input':
    case 'numberInput':
      ReactDom = (
        <Input
          value={value}
          onChange={onChange}
          isError={isError}
          style={{
            width,
            ...style
          }}
          {...otherProps}
        />
      );
      break;
    case 'textArea':
      ReactDom = (
        <TextArea
          value={value}
          placeholder={'请添加备注...'}
          rows={2}
          onChange={onChange}
          style={{
            width,
            ...style
          }}
          {...otherProps}
        />
      );
      break;
    case 'select':
      ReactDom = (
        <Select
          options={options}
          value={value}
          onChange={onChange}
          isError={isError}
          style={{
            width,
            ...style
          }}
          {...otherProps}
        />
      );
      break;
    default:
      ReactDom = null;
      break;
  }

  return (
    <div
      className={`ajaxItem ${marginRight ? 'margin-right' : ''}`}
      style={{ ...wrapperStyle, width }}
    >
      <div className="ajaxItem-hd">
        <div className="ajaxItem-hd-title">{title}</div>
        {isError ? (
          <div className="ajaxItem-hd-wrong-msg">{errorMsg}</div>
        ) : null}
      </div>
      {ReactDom}
    </div>
  );
};